<template>
    <div class="AddedVillageEdit" v-if="form.id">
        <div  style="text-align: left;font-size: 18px;font-weight: bold;margin-bottom: 10px;margin-top: 10px">
            <el-tag size="large" v-if="form.state === '0'" close-transition type="danger"  effect="dark" style="width: 220px;text-align: center">当前状态：待提交</el-tag>
            <el-tag size="large"  v-else-if="form.state === '1'" close-transition  type="warning"  effect="dark">当前状态：待镇党委审核</el-tag>
            <el-tag size="large" v-else-if="form.state === '2'" close-transition  type="primary"  effect="dark"  style="width: 220px;text-align: center">当前状态：待市委审核</el-tag>
            <el-tag size="large" v-else-if="form.state === '3'" close-transition  type="success"  effect="dark"  style="width: 220px;text-align: center">当前状态：市委审核通过</el-tag>
            <el-popover  placement="right"  width="400" trigger="click" >
                <el-timeline style="height: 350px;padding-top: 10px;overflow-y: scroll">
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :color="activity.color"
                        :timestamp="activity.modifiedAt">
                        <div>
                            <el-tag v-if="activity.status == '0'" close-transition type="success"  effect="dark">编辑</el-tag>
                            <el-tag v-else-if="activity.status == '1'" close-transition  type="primary"  effect="dark">提交</el-tag>
                            <el-tag v-else close-transition  type="danger"  effect="dark">审核</el-tag>
                            {{activity.auditor}}
                            {{activity.auditAdvice}}
                        </div>
                    </el-timeline-item>
                </el-timeline>
                <el-button slot="reference" type="text" @click="loadUpdateInfoList()">信息更新记录</el-button>
            </el-popover>
            <div style="float: right;padding-right: 25px">
                <div style="display: inline-block;font-size: 16px;color: red">
                    <!-- <p v-show="isHasTask">友情提示: 村干部信息更新任务已发布（<span style="color: goldenrod;font-weight: bold;text-decoration: underline">截止日期{{endTime}}</span>），当前信息可进行修改、保存、提交等操作！</p> -->
                    <!-- <p v-show="!isHasTask">友情提示: 村干部信息更新任务未发布，当前信息不可进行修改、保存、提交等操作！</p> -->
                </div>
            </div>
        </div>
        <el-form class="edit-form" v-loading="editLoad" ref="baseForm" label-position="right" :model="form" :rules="rules" label-width="120px">
            <el-row :gutter="40" style="margin-top: 20px">
                <el-col :span="4">
                    <el-card shadow="hover" style="height: 330px" class="header-content">
                        <el-upload
                            action=""
                            :auto-upload="true"
                            :file-list="images"
                            :http-request="uploadFile"
                            list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div style="position: relative;top: 250px;z-index: 110;text-align: center;">
                            <i class="el-icon-edit" style="color: goldenrod;" ></i>
                            <el-input size="large" class="name-input" v-model="form.name" placeholder="村干部姓名"></el-input>
                            <div style="width: 200px;margin: 0 auto">
                                <el-button type="success" size="small" :disabled="buttonDisabled" @click="saveBaseInfo('baseForm')">保存</el-button>
                                <el-button type="primary" size="small" :disabled="!submitable||buttonDisabled" @click="submit">提交</el-button>
                            </div>
                            <icon name="qrcode" scale="2.7" class="qrcode-content" @click.native="showQrCode()"></icon>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="10" >
                    <el-card shadow="hover" style="height: 330px" class="baseMassage">
                        <p class="cardTitle">基本人员信息</p><br>
                        <el-col :span="12" style="padding: 0">
                            <el-form-item label="性别" prop="sex">
                                <el-select v-model="form.sex"  placeholder="请选择性别">
                                    <el-option v-for="item in sexOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="出生日期" prop="birth">
                                <el-date-picker
                                    v-model="form.birth"
                                    type="date"
                                    placeholder="请选择出生日期"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="民族">
                                <el-select v-model="form.nation" placeholder="请选择民族">
                                    <el-option v-for="item in nationOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="籍贯">
                                <el-input v-model="form.nativePlace"  placeholder="请输入籍贯"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" style="padding: 0; min-height: 210px;">
                            <el-form-item label="身份证号" prop="identityCard">
                                <el-input show-word-limit minlength="18" v-model="form.identityCard"  placeholder="请输入身份证号">
                                    <el-popover
                                        v-show="form.identityCardAnnex"
                                        slot="prefix"
                                        placement="left"
                                        width="330"
                                        trigger="hover">
                                        <div v-for="subItem in handleImage(form.identityCardAnnex)" >
                                            <el-image :src="subItem"></el-image>
                                        </div>
                                        <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                    </el-popover>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="联系电话"  prop="contact">
                                <el-input v-model="form.contact"  placeholder="请输入联系电话"></el-input>
                            </el-form-item>
                            <el-form-item label="医疗保险" prop="medicalInsurance">
                                <el-select v-model="form.medicalInsurance"  placeholder="请选择医疗保险">
                                    <el-option v-for="item in medicalInsuranceOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="养老保险" prop="socialSecurityDatabases">
                                <el-select v-model="form.socialSecurityDatabases"  placeholder="请选择养老保险">
                                    <el-option v-for="item in socialSecurityDatabasesOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="10">
                    <el-card shadow="hover" style="height: 330px" class="workMessage">
                        <p class="cardTitle">基本工作信息</p><br>
                        <el-col :span="13" style="padding: 0">
                            <el-form-item label="担任职务" class="villageEditSel">
                                <el-select v-model="cadresPostList" placeholder="请选择" filterable multiple @change="handlePost()">
                                    <el-option v-for="item in postOptions"  :value="item.value" :label="item.label" :key="item.value" >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="政治面貌" prop="politicalOutlook">
                                <el-select v-model="form.politicalOutlook"  placeholder="请选择政治面貌" clearable @change="handlePartyTime">
                                    <el-option v-for="item in politicalOutlook" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学历"  prop="fullTimeEdu">
                                <el-select v-model="form.fullTimeEdu"  placeholder="请选择学历" clearable>
                                    <el-option v-for="item in eduOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    <el-popover
                                        v-show="form.educationAnnex"
                                        slot="prefix"
                                        placement="top"
                                        width="330"
                                        trigger="hover">
                                        <div style="height: 600px;overflow-x: scroll">
                                            <div v-for="subItem in handleImage(form.educationAnnex)" >
                                                <el-image :src="subItem"></el-image>
                                            </div>
                                        </div>
                                        <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                    </el-popover>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="毕业院校">
                                <el-input v-model="form.fullTimeSchool" placeholder="请输入毕业院校"></el-input>
                            </el-form-item>
                            <el-form-item label="是否村委会委员">
                               <el-select v-model="form.memberOfCommittee"  placeholder="请选择" clearable>
                                    <el-option value="是" label="是"></el-option>
                                    <el-option value="否" label="否"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" style="padding: 0;min-height: 210px;">
                            <el-form-item label="在村工作年限" prop="onDutyTime">
                                <el-input type="number" placeholder="请输入在村工作年限" v-model="form.onDutyTime" >
                                    <el-popover
                                        v-show="form.workTimeAnnex"
                                        slot="prefix"
                                        placement="top"
                                        width="330"
                                        trigger="hover">
                                        <div v-for="subItem in handleImage(form.workTimeAnnex)" >
                                            <el-image :src="subItem"></el-image>
                                        </div>
                                        <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                    </el-popover>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="入党时间" prop="partyTime" v-if="form.politicalOutlook === '党员'" >
                                <div>
                                    <el-popover
                                        v-show="form.partyTimeAnnex"
                                        slot="prefix"
                                        placement="left"
                                        width="330"
                                        trigger="hover">
                                        <div v-for="subItem in handleImage(form.partyTimeAnnex)" >
                                            <el-image :src="subItem"></el-image>
                                        </div>
                                        <el-button style="position: relative;margin-left: -20px;left: 3px" slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                    </el-popover>
                                    <el-date-picker
                                        v-model="form.partyTime"
                                        type="date"
                                        placeholder="请选择入党时间"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item label="健康状况"  prop="health">
                                <el-select v-model="form.health"  placeholder="请选择健康状况" clearable>
                                    <el-option v-for="item in healthOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="专技职称">
                                <el-input v-model="form.professionalTitle"  placeholder="请输入专技职称">
                                    <el-popover
                                        v-show="form.professionalTitleAnnex"
                                        slot="prefix"
                                        placement="top"
                                        width="330"
                                        trigger="hover">
                                        <div v-for="subItem in handleImage(form.professionalTitleAnnex)" >
                                            <el-image :src="subItem"></el-image>
                                        </div>
                                        <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                    </el-popover>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="是否村党组织委员">
                               <el-select v-model="form.memberOfPart"  placeholder="请选择" clearable>
                                    <el-option value="是" label="是"></el-option>
                                    <el-option value="否" label="否"></el-option>
                                </el-select>
                            </el-form-item>
                           <!-- <el-form-item label="在职学校">
                                <el-input v-model="form.partTimeSchool" placeholder="请输入非全日制学校"></el-input>
                            </el-form-item>-->
                        </el-col>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col >
            </el-row>
            <el-row :gutter="40" style="margin-top: 40px">
                <el-col :span="8" >
                    <el-card shadow="hover" style="min-height: 320px" class="workExperience" >
                        <p class="cardTitle">工作简历</p><br>
                        <el-col :span="24" style="margin-bottom: 15px;min-height: 190px;">
                            <el-input type="textarea" v-model="form.workExperience" :placeholder="workExperiencePlaceholder" :rows="8"></el-input>
                        </el-col>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" style="min-height: 320px" class="repaid">
                        <p class="cardTitle">报酬情况</p><br>
                        <div class="cardContent" >
                            <el-form v-for="(item, index) in form.rewards" label-position="top"  label-width="110px" :model="item" :ref="`rewardsForm${index}`"  inline  >
                                <el-form-item label="年份" >
                                    <el-date-picker
                                        v-model="item.achieveTime"
                                        type="year"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="基本报酬(元/年)">
                                    <el-input type="text" v-model="item.basicReward"  @input="getSum(item)"></el-input>
                                </el-form-item>
                                <el-form-item label="考核报酬(元/年)">
                                    <el-input type="text" v-model="item.reviewReward"  @input="getSum(item)"></el-input>
                                </el-form-item>
                                <el-form-item label="增收奖励(元/年)">
                                    <el-input type="text" v-model="item.otherReward"  @input="getSum(item)"></el-input>
                                </el-form-item>
                                <el-form-item label="其他(元/年)">
                                    <el-input type="text" v-model="item.des"  @input="getSum(item)"></el-input>
                                </el-form-item>
                                <el-form-item label="总报酬(元/年)" >
                                    <el-input type="text" v-model="item.totalReward" disabled readonly></el-input>
                                </el-form-item>
                                <el-form-item label="佐证材料" >
                                    <CommonFileUpload :isText=false class="fileButton" :value="item.supportDoc" @getValue="item.supportDoc = $event"></CommonFileUpload>
                                </el-form-item>
                                <el-form-item label="总报酬(元/年)" style="visibility: hidden">
                                    <el-input type="text" v-model="item.totalReward" disabled readonly></el-input>
                                </el-form-item>
                                <el-divider style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('rewards',index)"></icon></el-divider>
                            </el-form>
                            <div class="add-btn" @click="pushItem('rewards')">
                                <i class="el-icon-plus"></i>
                            </div>
                        </div>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" style="min-height: 320px" class="inCountry">
                        <p class="cardTitle">在村工作具有近亲属关系人员</p><br>
                        <div class="cardContent">
                            <el-form v-for="(item, index) in form.familyWorkInfoVOS" label-position="top" :model="item" :ref="`familyWorkForm${index}`" inline>
                                <el-form-item label="姓名">
                                    <el-input type="text" v-model="item.name"></el-input>
                                </el-form-item>
                                <el-form-item label="称谓">
                                    <el-input type="text" v-model="item.appellation"></el-input>
                                </el-form-item>
                                <el-form-item label="政治面貌">
                                    <el-select v-model="item.politicalStatus">
                                        <el-option v-for="item in Political" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="职务">
                                    <el-input type="text" v-model="item.job"></el-input>
                                </el-form-item>
                                <el-form-item label="在村工作时长">
                                    <el-input type="text" v-model="item.duration"></el-input>
                                </el-form-item>
                                <el-form-item label="站位" style="visibility: hidden">
                                    <el-input type="text" v-model="item.duration"></el-input>
                                </el-form-item>
                                <el-divider style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('familyWorkInfoVOS',index)"></icon></el-divider>
                            </el-form>
                            <div class="add-btn" @click="pushItem('familyWorkInfoVOS')">
                                <i class="el-icon-plus"></i>
                            </div>
                        </div>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row  :gutter="40" style="margin-top: 40px">
                <el-col :span="8">
                    <el-card shadow="hover" style="min-height: 320px"  class="honer" >
                        <p class="cardTitle">奖惩情况</p><br>
                        <div class="cardContent">
                            <el-form v-for="(item, index) in form.honours" label-position="top"  :model="item" :ref="`honourForm${index}`" inline>
                                <el-form-item label="奖或惩">
                                    <el-select type="text" v-model="item.rewardsType">
                                        <el-option v-for="item in rewardsTypeOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="时间">
                                    <el-date-picker
                                        v-model="item.achieveTime"
                                        type="year"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item  v-show="item.rewardsType == '表彰'" label="特殊表彰">
                                    <el-select type="text" v-model="item.honourType">
                                        <el-option v-for="subItem in honourType" :value="subItem.value" :label="subItem.label" :key="subItem.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item  v-show="item.rewardsType == '表彰'" label="表彰级别">
                                    <el-select type="text" v-model="item.honourDescription">
                                        <el-option v-for="subItem in honourDescriptionOptions" :value="subItem.value" :label="subItem.label" :key="subItem.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="奖惩内容">
                                    <el-input type="textarea" v-model="item.content" :rows="3"></el-input>
                                </el-form-item>
                                <el-form-item label="佐证材料" class="upFileStyle">
                                    <CommonFileUpload :isText=false  class="fileButton"  :value="item.supportDoc" @getValue="item.supportDoc = $event"></CommonFileUpload>
                                </el-form-item>
                                <el-divider style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('honours',index)"></icon></el-divider>
                            </el-form>
                            <div class="add-btn" @click="pushItem('honours')">
                                <i class="el-icon-plus"></i>
                            </div>
                        </div>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog
            v-if="qrCodeVis"
            :visible.sync="qrCodeVis"
            title="二维码信息"
            width="290px"
            :append-to-body="true">
            <div id="qrcode" style="margin: 0 auto;">
            </div>
            <div style="color: red;font-size: 16px;text-align: center">
                手机扫描二维码上传佐证材料！
                <br>
                仅限基本信息、工作信息模块！
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import LookUp from '@/lookup'
    import CommonFileUpload from '@/components/FileUpLoad';
    import QRCode  from "qrcodejs2"
    export default {
        name: "AddedVillageEdit",
        props: {
            currentSecretary: {
                type: String
            },
            currentItem: {
                type: Object
            },
            // isHasTask: {
            //     type: Boolean,
            //     default: false
            // },
            // endTime: {
            //     type: String,
            // },
        },
        // watch: {
        //     'currentSecretary.id': {
        //         handler: function () {
        //             this.form = JSON.parse(JSON.stringify(this.currentSecretary));
        //             this.initPost();
        //             this.submitable = false;
        //             if(this.form.state === '0'){
        //                 this.buttonDisabled = false;
        //             }else{
        //                 this.buttonDisabled = true;
        //             }
        //             this.images = [];
        //             this.images.push({name: 'avator.jpg', url: this.form.headSculpture});
        //         }
        //     },
        // },
        data() {
            return {
                form: {},
                activities: [],
                medicalInsuranceOptions:LookUp["MedicalInsurance"],
                socialSecurityDatabasesOptions:LookUp["SocialSecurityDatabases"],
                sexOptions:LookUp["Sex"],
                nationOptions:LookUp["nation"],
                eduOptions:LookUp["Education"],
                healthOptions:LookUp["health"],
                personOptions:LookUp["personTyle"],
                creditOptions:LookUp["credit"],
                rewardsTypeOptions:LookUp["rewardsTypeOptions"],
                honourDescriptionOptions:LookUp["honourDescriptionOptions"],
                honourType:LookUp["HonoursType"],
                Political : LookUp["Political"],
                politicalOutlook:LookUp['politicalOutlook'],
                trainingType : LookUp["TrainingType"],
                trainingTrueType : LookUp["trainingTrueType"],
                RankOptions: LookUp['rankOptions'],
                personFromOptions:LookUp["personFromTyle"],
                workExperiencePlaceholder: '2006.08-2010.10 任XX村支部组织委员' + '\n' +
                    '2010.11-2013.10 任XX村支部副书记' + '\n' +
                    '2013.11-2015.10 任XX村支部书记(示例)',
                honoursList: [],
                postOptions:LookUp['Post'].filter(item => item.value),
                rules:{
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    identityCard: [
                        { required: true,validator: (rule, value, callback) => {
                                if (!this.form[rule.field]) {
                                    callback(new Error('请输入身份证号'));
                                } else {
                                    if (this.form[rule.field].length != 18) {
                                        callback(new Error('请输入18位的身份证号'));
                                    } else {
                                        callback();
                                        return true;
                                    }
                                }
                            }, trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别',  trigger: 'blur' }
                    ],
                    birth: [
                        { required: true, message: '请选择出生日期',  trigger: 'blur' }
                    ],
                    contact: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' }
                    ],
                    fullTimeEdu: [
                        { required: true, message: '请选择学历',  trigger: 'blur' }
                    ],
                    health: [
                        { required: true, message: '请选择健康状况',  trigger: 'blur' }
                    ],
                    creditStatus: [
                        { required: true, message: '请选择有无失信情况',  trigger: 'blur' }
                    ],
                    personnelType: [
                        { required: true, message: '请选择人员类型',  trigger: 'blur' }
                    ],
                    onDutyTime: [
                        { required: true, message: '请输入在村任职年限', trigger: 'blur' }
                    ],
                    partyTime:[
                        { required: true, message: '请选择入党时间',  trigger: 'blur' }
                    ],
                    politicalOutlook:[
                        { required: true, message: '请选择政治面貌',  trigger: 'blur' }
                    ],
                    memberOfCommittee:[
                        { required: true, message: '请选择',  trigger: 'blur' }
                    ]
                },
                editLoad:false,
                images: [],
                timer: '',
                qrCodeVis: false,
                submitable: false,
                buttonDisabled:true,
                cadresPostList:[],
            }
        },
        components: {
            CommonFileUpload,
        },
        methods: {
            loadUpdateInfoList() {
                this.$http('POST', `identity/informationAudit/list?sort=createdAt,desc`,
                    {villageId: this.form.id, processType: '村干部信息更新'}, false).then(data => {
                    this.activities = [];
                    for (let i = 0; i < data.length; i++) {
                        let obj = {};
                        obj.modifiedAt = new Date(data[i].modifiedAt).Format("yyyy-MM-dd HH:mm");
                        obj.auditor = data[i].auditor;
                        obj.auditAdvice = data[i].auditAdvice;
                        obj.status = data[i].status;
                        this.activities.push(obj);
                    }
                });
            },
            uploadFile(http) {
                let file = http.file;
                let formData = new FormData();
                formData.append('file', file);
                this.$http('POST', '/zuul/identity/accessory/', formData, false).then(
                    res => {
                        this.images = [];
                        this.images.push({name: file.name, url: res.path});
                        this.form.headSculpture = res.path;
                    }
                )
            },
            getSum(item) {
                item.totalReward = (parseFloat(item.basicReward) * 100  + parseFloat(item.reviewReward) * 100 + parseFloat(item.otherReward) * 100 + parseFloat(item.des) * 100) / 100;
            },
            pushItem(field) {
                if (field === 'rewards') {
                    this.form[field].push({
                        cadresId: this.form.id,
                        basicReward: 0,
                        reviewReward: 0,
                        otherReward: 0,
                        totalReward: 0,
                        des: 0
                    })
                } else {
                    this.form[field].push({cadresId: this.form.id})
                }
            },
            delItem(field, index) {
                this.form[field].splice(index, 1);
            },
            getBaseInfo(id) {
                return this.$http('GET', `identity/villageCadres/${id}id`, false).then(data => {
                    this.form = data;
                    this.images = [];
                    this.images.push({name: 'avator.jpg', url: data.headSculpture});
                    return data;
                })
            },
            saveBaseInfo(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        if(!this.form.identityCardAnnex||!this.form.educationAnnex||!this.form.workTimeAnnex||(this.form.politicalOutlook==='党员'&&!this.form.partyTimeAnnex)){
                            this.$message({
                                type: 'warning',
                                message: '身份证、任职时长、学历或入党时间等佐证材料未上传完整，请补全佐证材料!'
                            });
                        }else{
                            this.editLoad = true;
                            let formDTO =  Object.assign({}, this.form);
                            formDTO.trainingInfoDTOS = formDTO.trainingInfoVOS;
                            formDTO.familyInfoDTOS = formDTO.familyInfoVOS;
                            formDTO.familyWorkInfoDTOS = formDTO.familyWorkInfoVOS;
                            delete formDTO.trainingInfoVOS;
                            delete formDTO.familyInfoVOS;
                            delete formDTO.familyWorkInfoVOS;
                            // this.$http('PUT', `identity/villageCadres/${formDTO.id}id`,formDTO, false).then(content => {
                            this.$http('PUT', `identity/villageCadres/updateTemporary/${formDTO.id}id`,formDTO, false).then(content => {
                                // this.getBaseInfo(formDTO.id).then(
                                    // res => {
                                      console.log(content.cadresInfo, 'content');
                                      this.form = JSON.parse(content.cadresInfo)
                                        this.editLoad = false;
                                        this.submitable = true;
                                        // this.$emit("handleFinish", res);
                                        this.$message({
                                            type: 'success',
                                            message: '当前信息保存成功！'
                                        });
                                    // }
                                // )
                            })
                        }
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '存在未填写的信息，请补全信息！'
                        });
                    }
                })
            },
            saveTempInfo(){
                this.editLoad = true;
                let formDTO =  Object.assign({}, this.form);
                formDTO.trainingInfoDTOS = formDTO.trainingInfoVOS;
                formDTO.familyInfoDTOS = formDTO.familyInfoVOS;
                formDTO.familyWorkInfoDTOS = formDTO.familyWorkInfoVOS;
                delete formDTO.trainingInfoVOS;
                delete formDTO.familyInfoVOS;
                delete formDTO.familyWorkInfoVOS;
                // this.$http('PUT', `identity/villageCadres/${formDTO.id}id`,formDTO, false).then(content => {
                this.$http('PUT', `identity/villageCadres/updateTemporary/${formDTO.id}id`,formDTO, false).then(content => {

                    // this.getBaseInfo(formDTO.id).then(
                    //     res => {
                            this.form = JSON.parse(content.cadresInfo)
                            this.submitable = true;
                            this.editLoad = false;
                            // this.$emit("handleFinish", res);
                            this.$message({
                                type: 'success',
                                message: '当前信息保存成功！'
                            });
                    //     }
                    // )
                })
            },
            submit() {
                this.editLoad = true;
                console.log(this.form,'this.form');
                console.log(this.currentItem,'this.currentItem');
                let param
                param = this.currentItem;
                param.statue = '3'
                this.$http('PUT', `/identity/villageCadresAddTemporary/${this.currentItem.id}id`,param, false).then(content => {
                  console.log(content,'content');
                    // this.getBaseInfo(this.form.id).then(
                    //     res => {
                    //       console.log(res, 'ressss');
                    //         this.form = JSON.parse(res.villageCadresTemporaryes[0].cadresInfo)
                    //         this.form.state = res.villageCadresTemporaryes[0].statue
                            this.editLoad = false;
                    //         this.submitable = false;
                            this.buttonDisabled = true;
                            // this.$emit("handleFinish", res);
                            this.$message({
                                type: 'success',
                                message: '当前信息提交成功！'
                            });
                        // }
                    // )
                });
            },
            loadAnnex() {
                this.$http('POST', '/identity/villageCadresAnnex/list', {cadresId: this.form.id}, false).then(data => {
                    data.forEach(item => {
                        this.form[item.type] = item.filePath;
                    })
                })
            },
            showQrCode() {
                this.qrCodeVis = true;
                this.$nextTick(() => {
                    let token = sessionStorage.getItem("token");
                    document.getElementById('qrcode').innerHTML = '';
                    let qrcode = new QRCode('qrcode', {
                        width: 250,
                        height: 250,
                        text: `http://122.97.218.162:21018/#/mobileUploadFile?cadreId=${this.form.id}&token=${token}`
                    })
                })
            },
            handleImage(imageUrl){
                let arr = [];
                if(imageUrl){
                    if(imageUrl.indexOf(',')>-1){
                        imageUrl.split(',').forEach(item => {
                            arr.push(item.split('&')[0]);
                        })
                    }else{
                        arr.push(imageUrl.split('&')[0]);
                    }
                }
                return arr;
            },
            handlePost(){
                this.form.cadresPost = this.cadresPostList.join(',');
            },
            initPost(){
                this.cadresPostList = [];
                if(this.form.cadresPost){
                    this.cadresPostList = this.form.cadresPost.split(",");
                }
            },
            handlePartyTime(val){
                if(val!=='党员'){
                    this.form.partyTime = null;
                }
            }
        },
        created(){
          console.log(this.currentSecretary,'this.currentSecretary');
          console.log(this.currentItem,'this.currentItem');
          this.form = JSON.parse(this.currentSecretary);
          if(this.currentItem.statue == '3') {
            this.buttonDisabled = true
          } else {
                this.buttonDisabled = false;
          }
        },
        mounted() {
            console.log(this.form,'this.form ');
            this.initPost();
            if(this.medicalInsuranceOptions.filter(item=> item.label==='无').length==0){
                this.medicalInsuranceOptions.push({label:'无',value:'无'});
            }
            if(this.socialSecurityDatabasesOptions.filter(item=> item.label==='无').length==0){
                this.socialSecurityDatabasesOptions.push({label:'无',value:'无'});
            }
            // if(this.form.state === '0'){
            //     this.buttonDisabled = false;
            // }else{
            //     this.buttonDisabled = true;
            // }
            this.images = [];
            this.images.push({name: 'avator.jpg', url: this.form.headSculpture});
            this.timer = setInterval(() => {
                this.loadAnnex();
            }, 10000)
        },
        beforeDestroy() {
            window.clearInterval(this.timer);
        }
    }
</script>

<style scoped>
    .baseMassage {
        background-image: url("../../../static/messageBg/cardBg.png");
        background-size: 100% 100%;
    }
    .workMessage {
        background-image: url("../../../static/messageBg/workMessageBg.png");
        background-size: 100% 100%;
    }
    /* .workExperience {
         background-image: url("../../static/messageBg/workExperienceBg.png");
         background-size: 100% 100%;
     }
     .repaid {
         background-image: url("../../static/messageBg/repaidBg.png");
         background-size: 100% 100%;
     }
     .family {
         background-image: url("../../static/messageBg/familyBg.png");
         background-size: 100% 100%;
     }
     .inCountry {
         background-image: url("../../static/messageBg/inCountryBg.png");
         background-size: 100% 100%;
     }
     .train {
         background-image: url("../../static/messageBg/trainBg.png");
         background-size: 100% 100%;
     }
     .honer {
         background-image: url("../../static/messageBg/honerBg.png");
         background-size: 100% 100%;
     }
     .assessment {
         background-image: url("../../static/messageBg/assessmentBg.png");
         background-size: 100% 100%;
     }*/
    .AddedVillageEdit .cardTitle{
        padding: 20px 20px 0 20px;
        text-align: left;
        font-size: 18px;
    }
    .AddedVillageEdit .cardContent{
        min-height: 205px;
        padding: 0px 20px;
    }
    .AddedVillageEdit .tempSaveBtn{
        text-align: right;
        margin: 10px 16px 10px 0;
    }
    .AddedVillageEdit .fileButton{
        width: 160px;
        text-align: left;
        display: inline-block
    }
</style>
<style>
    .edit-form  .el-input {
        display: inline-block;
    }
    .edit-form .el-input__prefix .el-button {
        position: relative;
        top: -2px;
        left: -24px;
    }
    .edit-form .el-input .el-input--prefix .el-input__inner {
        padding-left: 0;
    }
    .edit-form .el-date-editor.el-input--prefix .el-input__inner {
        padding-left: 30px !important;
    }
    .AddedVillageEdit .edit-form .el-form-item__error {
        margin-left: 15px;
        position: relative;
        left: -48px;
        top: 100%;
    }

    #qrcode img {
        display: inline-block !important;
    }
    .AddedVillageEdit .el-card__body{
        padding: 0 !important;
    }
    .header-content .el-upload--picture-card {
        width: 160px!important;
        height: 227px!important;
        margin: 15px auto 10px auto;
        left: 55px;
        position: absolute;
    }
    .header-content .el-upload-list--picture-card .el-upload-list__item {
        width: 160px!important;
        height: 227px!important;
        margin: 15px auto 10px auto;
        position: absolute;
        top: 16px;
        left: 55px;
        z-index: 99;
    }
    .name-input {
        display: inline-block!important;
        width: 50px!important;
        position: relative!important;
        height: 30px!important;
        margin-top: -8px!important;
    }
    .name-input .el-input__inner {
        width: 50px;
        margin-bottom: 10px;
        padding: 0;
        font-size: 16px;
        border: none;
        background: transparent;
        color: goldenrod;
        text-align: left;
    }
    .add-btn {
        width: 100%;
        height: 45px;
        border-radius: 20px;
        border: 1px #d9d9d9 dashed;
        cursor: pointer;
        clear: both;
        text-align: center;
    }
    .add-btn i {
        font-size: 28px!important;
        line-height: 44px;
        color: #d9d9d9;
    }
    .add-btn:hover {
        background: #f8f8f8;
    }
    .AddedVillageEdit svg{
        margin: 0 5px!important;
    }
    .AddedVillageEdit .el-form--label-top .el-form-item__label {
        float: left!important;
        text-align: left!important;
        padding: 0!important;
    }
    .AddedVillageEdit .familyWorkStyle{
        width: 30%;
        float: left;
        margin: 5px 20px;
    }
    .el-divider__text.is-center svg {
        cursor: pointer;
    }
    .qrcode-content {
        color: #2B2B2B;
        float: right;
        transition: all .3s;
        position: relative;
        top: -30px;
    }
    .qrcode-content:hover {
        color: #409eff;
        transform:scale(1.1);
        cursor: pointer;
    }
    .AddedVillageEdit .el-input--prefix .el-input__inner{
        padding-left: 15px!important;
    }
    .AddedVillageEdit .el-input--suffix .el-input__inner{
        padding-right: 0px!important;
    }
    .AddedVillageEdit .el-input {
        width: 160px;
    }
    .AddedVillageEdit .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin-bottom: 10px!important;
    }
    .AddedVillageEdit .el-input--mini .el-input__inner {
        width: 160px !important;
    }
    .AddedVillageEdit .el-select {
        width: 160px !important;
    }
    .AddedVillageEdit .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 160px !important;
    }
    .AddedVillageEdit .cardContent .el-textarea__inner{
        width: 160px!important;
    }
    .AddedVillageEdit .cardContent .el-form-item{
        margin: 0 18px;
    }
    .AddedVillageEdit .villageEditSel .el-tag{
        height: 20px!important;
        font-size:12px!important;
        line-height: 20px!important;
    }
</style>














